<script lang="ts" setup>
import { ElTable, ElTableColumn } from 'element-plus'
import { toRefs, watch } from 'vue'

import memberPage from '.././member-public/member-table-page.vue'

const props = withDefaults(defineProps<{
    activeName?: any
    tableColumn?: any
    tableData?: any
    tableTotal?: any
    tableTypeFour?: boolean
    tableTypeThree?: boolean
}>(), {
    activeName: '',
    tableColumn: [],
    tableData: [],
    tableTotal: 0,
    tableTypeFour: false,
    tableTypeThree: false,
})
const emits = defineEmits(['pageChange'])
// const tableDataLength = ref(4)
const fourthTableCell = ref('')
const getTableTotal = ref(0)

const { activeName, tableData, tableTotal, tableTypeFour, tableTypeThree } = toRefs(props)

watch([activeName, tableTotal], ([newActiveName, newTableTotal], [oldActiveName, oldTableTotal]) => {
    fourthTableCell.value = newActiveName
    console.log(`Count changed from ${newTableTotal} to ${oldTableTotal}`)
    console.log(newTableTotal, oldActiveName, newActiveName, 'newTableTotalnewTableTotal')
    getTableTotal.value = newTableTotal
})
// tableDataLength.value = tableData.value.length
// console.log(tableDataLength.value, 'tableDataLengthtableDataLength')
function cellStyle(columnIndex: any) {
    // console.log(columnIndex, rowIndex, 'row,colomn,rowIndex,colomnIndex')
    if (columnIndex.columnIndex === 2) {
        return {
            color: '#73d13d',
        }
    }
    if (columnIndex.columnIndex === 4 && fourthTableCell.value === 'fourth') {
        return {
            color: '#f3b752',
        }
    }
}
function handlePageMember(page: any) {
    console.log(page)
    emits('pageChange', page)
}
</script>

<template>
    <ElTable :data="tableData"
             style="width: 100%"
             height="100%"
             :cell-style="cellStyle"
             :header-cell-style="{
                 background: '#f8f8f8',
             }"
             border
    >
        <ElTableColumn v-for="item in tableColumn"
                       :key="item.id"
                       fixed
                       :prop="item.id"
                       :label="item.name"
        />

        <ElTableColumn v-if="tableTypeThree"
                       fixed="right"
                       label="操作"
                       width="120"
        >
            <template #default>
                <el-button link
                           type="primary"
                           size="small"
                >
                    删除
                </el-button>
            </template>
        </ElTableColumn>

        <ElTableColumn v-if="tableTypeFour"
                       fixed="right"
                       label="操作"
                       width="120"
        >
            <template #default>
                <el-button link
                           type="primary"
                           size="small"
                >
                    查看
                </el-button>
            </template>
        </ElTableColumn>
    </ElTable>

    <member-page :total="getTableTotal"
                 @handle-page="handlePageMember"
    />
</template>
